<template>
  <hr>
  <h3 v-if="loading">正在加载中</h3>
  <h3 v-else-if="errorMsg">错误信息:{{errorMsg}}</h3>
  <div v-else>
    <!--    {{userData}}-->
    <div class="container-fluid">
      <div class="row">
        <div class="col-1"></div>
        <div class="col-10">
          <div class="w">
            <div>
              <img :src="prefix2+userData.face+'.jpg'" class="img">
              <span class="name">{{userData.name}}</span>
            </div>
          </div>
          <!--          <div class="row">-->
          <!--            <div class="col-1">主页</div>-->
          <!--            <div class="col-1">历史记录</div>-->
          <!--            <div class="col-1">我的收藏</div>-->
          <!--            <div class="col-1">视频管理</div>-->
          <!--            <div class="col-2"></div>-->
          <!--            <div class="col-2"></div>-->
          <!--          </div>-->
          <div style="padding: 20px">
            <div class="row">
              <div class="col-9">
                <!--                我的视频-->
                <div>
                  <div class="row">
                    <div class="col-2">
                      <h4 v-if="self">我的视频</h4>
                      <h4 v-else>Ta视频</h4>
                    </div>
                    <div class="col-9"></div>
                    <div class="col-1"  >
                      <!--                      这里进入我的所有视频页面-->
                      <a href="javascript:" v-if="self"><input type="button" value="更多>" @click="self?changeComponent(VideoManage):null"></a>
                    </div>
                  </div>
                  <div>
                    <!--                  视频列表,这里展示至多5个视频-->
                    <div class="row row-cols-1 row-cols-md-5 g-4">
                      <div class="col" v-for="(item,k) in page.list" :key="k" @click="playVideo(item.videoid,true)">
                        <div class="card">
                          <img class="card-img-top" alt="..." :src="request.pic(item.cover_pic)">
                          <div class="card-body">
                            <h6 class="card-title bcad">{{ item.title }}</h6>
                            <p class="card-text">播放量：{{item.play_num}}<br> 时间：{{item.up_time.slice(0,10)}} </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
                <div aria-label="Page navigation example" v-if="!self">
                  <ul class="pagination justify-content-end" >
                    <li class="page-item">
                      <a class="page-link">共{{page.pages}}页</a>
                    </li>
                    <li :class="'page-item'+(page.isFirstPage?' disabled':null)"><a class="page-link" @click="query.page--">上一页</a></li>
                    <li v-for="i in page.navigatepageNums"
                        :key="i" :class="'page-item'+(page.pageNum==i?' active':null)">
                      <a class="page-link" @click="query.page=i">{{ i }}</a>
                    </li>
                    <li :class="'page-item'+(page.isLastPage?' disabled':null)"><a class="page-link" @click="query.page++">下一页</a></li>
                  </ul>
                </div>

                <!--                我的专栏-->
                <div v-if="false">
                  <div class="row">
                    <div class="col-2"><h4>我的专栏</h4></div>
                    <div class="col-9"></div>
                    <div class="col-1"  >
                      <form>
                        <a href=""><input type="button" value="更多>"></a>
                      </form>
                    </div>
                  </div>
                  <div class="row row-cols-1 row-cols-md-3 g-4"  >
                    <!--                  专栏列表-->
                    <div class="col">
                      <div class="card">
                        <img src="1.jpeg" class="card-img-top" alt="...">
                        <div class="card-body">
                          <h5 class="card-title">标题</h5>
                          <p class="card-text">播放量： 时间： </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
                <!--                我的关注-->
                <div v-if="self">
                  <div class="row">
                    <div class="col-2">
                      <h4 v-if="self">我的关注</h4>
                      <h4 v-else>Ta的关注</h4>
                    </div>
                    <div class="col-9"></div>
                    <div class="col-1"  >
                      <form>
                        <a href="javascript:"><input type="button" value="更多>" @click="self?changeComponent(SubscribeList):null"></a>
                      </form>
                    </div>
                  </div>
                  <div class="row row-cols-1 row-cols-md-3 g-4" >
                    <!--                    关注列表-->
                    <div class="col" v-for="(i,x) in subs" :key="x" @click="seeInfo(i.uuid)" >
                      <div class="card mb-3" style="max-width: 400px;">
                        <div class="row g-0">
                          <div class="col-md-4">
                            <img :src="request.face(i.face)" class="img-fluid rounded-start" alt="...">
                          </div>
                          <div class="col-md-8">
                            <div class="card-body">
                              <h5 class="card-title">作者姓名: {{ i.name }}</h5>
                              <p class="card-text"> 作者简介: {{i.info}}</p>
                              <p class="card-text" v-if="false"><small class="text-muted">关注日期</small></p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
                  <!--                  我的收藏-->
                  <div v-if="false">
                    <div class="row">
                      <div class="col-2"><h4>我的收藏</h4></div>
                      <div class="col-9"></div>
                      <div class="col-1"  >
                        <form>
                          <a href=""><input type="button" value="更多>"></a>
                        </form>
                      </div>
                    </div>
                    <div class="row row-cols-1 row-cols-md-3 g-4"  >
                      <!--                    收藏列表-->
                      <div class="col">
                        <div class="card">
                          <img src="1.jpeg" class="card-img-top" alt="...">
                          <div class="card-body">
                            <h5 class="card-title">标题</h5>
                            <p class="card-text">播放量： 时间： </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue"/>
                  <!--                  历史记录-->
                  <div v-if="false">
                    <div class="row">
                      <div class="col-2"><h4>历史记录</h4></div>
                      <div class="col-9"></div>
                      <div class="col-1"  >
                        <form>
                          <a href=""><input type="button" value="更多>"></a>
                        </form>
                      </div>
                    </div>

                    <div class="row row-cols-1 row-cols-md-3 g-4"  >
                      <!--                      历史列表-->
                      <div class="col">
                        <div class="card">
                          <img src="1.jpeg" class="card-img-top" alt="...">
                          <div class="card-body">
                            <h5 class="card-title">标题</h5>
                            <p class="card-text">播放量： 时间： </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


              </div>
              <div class="col-3">
                <div v-if="false">
                  <span>获赞数:</span><br><br>
                  <span>关注数:</span><br><br>
                  <span>粉丝数:</span><br><br>
                  <span>播放数:</span><br><br>
                  <span>阅读数:</span>
                </div>
                <br>
                <div>
                  <h5 v-if="self">我的个性签名</h5>
                  <h5 v-else>个性签名</h5>
                  <textarea style="min-height:80px;min-width:80%;max-height:80px;max-width:80%;" v-model="userData.info" @change="changeInfo()" :readonly="toChange" @click="toChange=true" :disabled="toChange">
                    </textarea>
                  <input type="submit" value="修改" @click="toChange=true" v-if="self">
                </div>
                <div>
                  <h4>个人资料<span class="text-end" @click="null"> </span></h4>
                  <span>用户id：{{userData.uuid}}</span><br>
                  <span>email：{{userData.email}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-1">
        </div>
      </div>

    </div>
  </div>


</template>

<script setup lang="ts">
import {computed, inject, provide, reactive, Ref, ref, watch} from "vue";
import useGetRequest from "@/hooks/useGetRequest";
import {pageInfo, PageInfo, User, UserData, VideoData, VideoState} from "@/types/AllData";
import VideoManage from '@/components/VideoManage.vue'
import SubscribeList from '@/components/SubscribeList.vue'
import request from "@/hooks/request";

const aComponent = inject('aComponent')
const changeComponent = inject('changeComponent')
const prefix:string |undefined = inject('prefix')
const prefix2:string |undefined = inject('prefix2')
const uuid=inject<Ref<number>>("uuid")
const userId=inject<Ref<number>>("userId")
const playVideo=inject('playVideo')
const seeInfo=inject('seeInfo')
const url = prefix + 'user/info/'+userId?.value

// console.log(url)


const {loading,data,errorMsg} = useGetRequest<UserData>(url)
const userData = data
provide("userData",userData)

const toChange=ref(false)

const subs=ref([User])
//修改信息
const changeInfo=()=>{
  request.get('user/change_info/info',{info:userData.value?.info})
  toChange.value=false
}

request.get('user/getSubs',{page:1,num:3}).then(re=>{
  subs.value=re.list
})
// console.log(videos.value)


const self=computed(()=>uuid?.value==userId?.value)

const query=reactive({
  uuid:userId?.value,
  page:1,
  num:15
})
const page=ref<PageInfo<VideoData>>(pageInfo)
watch(query,()=>{
  request.get('user/getVideoRepository',query).then(re=>{
    page.value=re
  })
})

watch(userId||ref(0),async ()=>{
  userData.value=await request.get('user/info/'+userId?.value)
  query.uuid=userId?.value
})
request.get('user/getVideoRepository',query).then(re=>{
  page.value=re
})
</script>
<style scoped src="../assets/css/person.css"/>
<style scoped>

</style>